<template>
	<div class="login pos-r">
		<img :src="loginUrl.background" class="background"/>
		<div class="login-con middle pl-20 pr-20 text-c">
			<img  :src="loginUrl.logo" class="logo pt-20" height="100" width="100"/>	
			<div class="login-box pt-20">
				<el-row >
					<transition name="el-fade-in" mode="out-in">
						<el-button v-if="warn" v-html="msg"  class="waring mb-20 display-in" @click="mobile_register"></el-button>
					</transition>
				</el-row>
				<el-row>
					<el-input type="text" placeholder="请输入手机号进行注册" v-model.trim="mobile_phone"  class="login-input2" :class="{border:borderOne}">
																
					</el-input>
				</el-row>
				<el-row :gutter="10">
					<el-col :span="16" class="pt-20">
						<el-input type="text" placeholder="手机验证码" v-model.trim="verify_code" class="login-input2" :class="{border:borderTwo}"></el-input>				
					</el-col>
					<el-col :span="8" class="pt-20">
						<el-button @click="sentCode" :disabled="disabled || time>0" class="login-button3 pt-20 disabled2" >{{sentPhoneCode}}</el-button>
					</el-col>
				</el-row>
				<el-row>
					<el-input type="password" placeholder="请设置8-20位密码" v-model.trim="newPassword" class="login-input2 pt-20" :class="{border:borderThree}">
																
					</el-input>
				</el-row>
				<el-row class="mt-20 pb-20">
					<el-button  class="w-100 login-button3 display-b " @click="register">
						注  册
					</el-button>
				</el-row>
				<el-row class="mb-20">
					<span>已有账号？</span>
					<router-link to="/" class="f12 color-b ">去登录→</router-link>
				</el-row>
			</div>
		</div>
	</div>
</template>

<script>
	import router from '@/router'
	import {getRegisterCode,getPhoneNum,getRegisterMess} from '@/api/login'
	export default {
		name: 'forgetMess',  
		data (){
		 	return{
		 		msg:"",
		 		warn:false,
		 		mobile_phone:"",
		 		verify_code:"",
		 		newPassword:"",
		 		borderOne:false,
		 		borderTwo:false,
		 		borderThree:false,
		 		time:0
		 	}
		 },
		created:function(){
				this.$store.dispatch("doLoginURL");
		  },
		props:{
			disabled:{
				type:Boolean,
				default:false
			},
			second:{
				type:Number,
				default:60
			}
		},
		computed:{
			loginUrl(){							 	
				return this.$store.getters.getLoginUrl
			},
			sentPhoneCode(){
				return this.time>0?"重新发送("+this.time+"s)":"发送验证码"
			}
		},
		methods:{
			mobile_register:function(){
				//信息提示里显示出的使用手机号找回密码
				if(event.srcElement.nodeName=="SPAN"){
					if(event.srcElement.innerText==='"使用手机号找回密码"'){
						router.replace("/login_errorPage/mobileReset")
					}
				}
			},
			sentCode:function(){
				this.borderOne=false;
				this.msg="";
				var patt1=/^[1][3,4,5,7,8][0-9]{9}$/;
				switch(true){
					case this.mobile_phone=="":
						let arr=["warn","borderOne"];
						this.isBoolean(arr,true);
						this.msg="请输入你的手机号"
						break;
					case !patt1.test(this.mobile_phone):
						let arr1=["warn","borderOne"];
						this.isBoolean(arr1,true);
						this.msg="请输入正确的手机号";
						break;
					case patt1.test(this.mobile_phone):
						getPhoneNum(this.mobile_phone)
						.then(({data})=>{
							if(data.exists==1){
								let arr2=["warn","borderOne"];
								this.isBoolean(arr2,true);
								this.msg='该手机号已经注册'+'<span class="cursor color-b register">'+'"使用手机号找回密码"'+'</span>';
							};
							if(data.exists==0){
								getRegisterCode('phone',this.mobile_phone)
								.then(({data})=>{
									this.time=this.second;
									this.timer();
								})
								.catch(({response:{data}})=>{
									//发送验证失败
									this.warn=true;			
									this.msg=data.errorcmt;									
								})
							}
						})
						break;
				}
			},
			isBoolean(isArrt,booleans){
				isArrt.map(item=>this[item]=booleans)
			},
			timer:function(){
				if(this.time>0){
					this.time--;
					setTimeout(this.timer,1000)
				}
			},
			register:function(){				
				//手机号码没填或者是格式错误
				let arr=["borderOne","borderTwo","borderThree"];
				this.isBoolean(arr,false)
				this.msg="";
				var patt1=/^[1][3,4,5,7,8][0-9]{9}$/;
				switch(true){
					case this.mobile_phone=="":
						let arr1=["warn","borderOne"];
						this.isBoolean(arr1,true);
						this.msg="请输入你的手机号"
						break;
					case !patt1.test(this.mobile_phone):
						let arr2=["warn","borderOne"];
						this.isBoolean(arr2,true);
						this.msg="请输入正确的手机号";
						break;
				};
				//手机号码是否存在然后处理其他错误
				if(patt1.test(this.mobile_phone)){
					getPhoneNum(this.mobile_phone)
					.then(({data})=>{
						if(data.exists==1){
							let arr3=["warn","borderOne"];
							this.isBoolean(arr3,true);
							this.msg='该手机号已经注册'+'<span class="cursor color-b register">'+'"使用手机号找回密码"'+'</span>';
						};
						if(data.exists==0){
							switch(true){																
								case this.verify_code=="":	
									let arr7=["warn","borderOne"];
									this.isBoolean(arr7,false);
									let arr4=["warn","borderTwo"];
									this.isBoolean(arr4,true);
									this.msg="请输入手机验证码";						
									break;
								case this.newPassword=="":
									let arr8=["warn","borderOne","borderTwo"];
									this.isBoolean(arr8,false);
									let arr6=["borderThree","warn"];
									this.isBoolean(arr6,true);
									this.msg="请设置你的密码";						
									break;
								case this.newPassword.length>20||this.newPassword.length<8:
									let arr10=["warn","borderOne","borderTwo"];
									this.isBoolean(arr10,false);
									let arr9=["borderThree","warn"];
									this.isBoolean(arr9,true);
									this.msg="手机密码为8-20位";			
									break;
								default:
									getRegisterMess(this.mobile_phone,this.verify_code,this.newPassword)
									.then(({data})=>{					
										router.replace("/");
										this.$store.dispatch("doRegisterSuccess",true);
									})
									.catch(({response:{data}})=>{
										this.msg=data.errorcmt;										
									})
							}
						}
					})
					.catch(({response:{data}})=>{
						this.msg=data.errorcmt
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	.login{
		width: 100%;
		max-width: 1920px;
		margin: 0 auto;
		.background{
			position: fixed;
		    height: 100%;
		    width: 100%;
		    left: 0;
		    top: 0;
		}
	.middle{
		position: absolute;
		top: 128px;
		left: 50%;
		margin-left: -160px;
		}
	.login-con{
		background-color: #fff;
		width: 280px;
		border-radius: 6px;
		box-shadow: 0px 0px 4px 0px rgba(0,0,0,.3);	
		.login-box{
			.border{
				.el-input__inner{
					border:1px solid #FF5B00;
					}
			}
			.waring.el-button{
				&:visited{
					color: #333;
					border-color:#FF5B00;
				}
				&:hover{
					color: #333;
					border-color:#FF5B00;
				}
				&:active{
					color: #333;
					border-color:#FF5B00;
				}
				&:focus{
					color: #333;
					border-color:#FF5B00;
				}
			}
		}

	}
}
</style>